/*
 * @Author: shijianxin
 * @Date: 2022-04-25 14:40:17
 * @Description: 表单组件
 */

import {
  Button,
  Checkbox,
  Form,
  Input,
  InputNumber,
  message,
  Switch,
} from "antd";
import TextArea from "antd/lib/input/TextArea";
import React, { useEffect } from "react";
import { RouteComponentProps } from "react-router";
import { IMovie } from "../services/MovieService";
import ImgUploader from "./ImgUploader";
import { withRouter } from "react-router-dom";

interface IFormProp extends RouteComponentProps {
  onSubmit: (moive: IMovie) => Promise<string | null>;
  movie?: IMovie;
}

const AllAreas: { label: string; value: string }[] = [
  { label: "中国大陆", value: "中国大陆" },
  { label: "美国", value: "美国" },
  { label: "中国台湾", value: "中国台湾" },
  { label: "英国", value: "英国" },
];

const AllTypes: { label: string; value: string }[] = [
  { label: "喜剧", value: "喜剧" },
  { label: "灾难", value: "灾难" },
  { label: "动作", value: "动作" },
  { label: "悬疑", value: "悬疑" },
];

const MovieForm: React.FC<IFormProp> = (props) => {
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue(props.movie);
  }, [props]);

  const onFinish = async (values: any) => {
    const resp = await props.onSubmit(values);
    if (resp) {
      message.error(resp);
    } else {
      message.success("提交成功", 1, () => {
        props.history.push("/movie");
      });
    }
  };
  return (
    <Form
      style={{ width: "400px" }}
      name="basic"
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 19 }}
      autoComplete="off"
      form={form}
      onFinish={onFinish}
    >
      <Form.Item
        label="电影名称："
        name="name"
        rules={[{ required: true, message: "请输入电影名称!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item label="封面图：" name="poster">
        <ImgUploader />
      </Form.Item>

      <Form.Item
        label="上映地区："
        name="areas"
        rules={[{ required: true, message: "请选择电影上映地区!" }]}
      >
        <Checkbox.Group options={AllAreas} />
      </Form.Item>

      <Form.Item
        label="电影类型："
        name="types"
        rules={[{ required: true, message: "请选择电影类型!" }]}
      >
        <Checkbox.Group options={AllTypes} />
      </Form.Item>

      <Form.Item
        label="时长："
        name="timeLong"
        rules={[{ required: true, message: "请输入时长!" }]}
      >
        <InputNumber min={1} step={10} />
      </Form.Item>

      <Form.Item
        label="正在热映："
        name="isHot"
        valuePropName="checked"
        rules={[{ required: true, message: "请选择是否正在热映!" }]}
        initialValue={false}
      >
        <Switch />
      </Form.Item>

      <Form.Item
        label="即将上映："
        name="isComing"
        valuePropName="checked"
        rules={[{ required: true, message: "请选择是否即将上映!" }]}
        initialValue={false}
      >
        <Switch />
      </Form.Item>

      <Form.Item
        label="经典影片："
        name="isClassic"
        valuePropName="checked"
        rules={[{ required: true, message: "请选择是否经典影片!" }]}
        initialValue={false}
      >
        <Switch />
      </Form.Item>

      <Form.Item
        label="描述："
        name="description"
        rules={[{ required: true, message: "请输入描述!" }]}
      >
        <TextArea rows={4} />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 5, span: 19 }}>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default withRouter(MovieForm);
